import { connect } from 'react-redux'
import { nanoid } from 'nanoid'
import React, { Component } from 'react'
import {createAddPersonAction} from '../../redux/person_action'

class Person extends Component {

  addPerson = ()=> {
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = {id:nanoid(), name, age}
    this.props.jiaYiRen(personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
  }
  render() {
    return (
      <div>
        <h2>我是Person组件, 上面组件求和为：{this.props.count}</h2>
        <input type="text" placeholder='请输入姓名' ref={c => this.nameNode = c}/>
        <input type="text" placeholder='请输入年龄' ref={c => this.ageNode = c}/>
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.persons.map((p)=>{
              return <li key={p.id}>{p.name}----{p.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect(
  state =>({persons: state.persons, count: state.count}),
  {jiaYiRen: createAddPersonAction}
)(Person)


